<template>
  <div class="commentItem">
    <div class="top">
      <div class="left">
        <span class="nickName">{{ commentParent.user.nickname }}</span>
        <span class="time">{{
          commentParent.create_date | offsetdateFormat
        }}</span>
      </div>
      <span class="replay" @click="replaybyConnentItem(commentParent)"
        >回复</span
      >
    </div>
    <!-- 递归调用组件 -->
    <commentItem
      v-if="commentParent.parent"
      :commentParent="commentParent.parent"
      @sendComment="replaybyConnentItem"
    ></commentItem>
    <div class="bottom">
      <p class="comment_conent">{{ commentParent.content }}</p>
    </div>
  </div>
</template>

<script>
import { offsetdateFormat } from "@/utils/myfilters.js";
export default {
  name: "commentItem",
  props: ["commentParent"],
  data() {
    return {};
  },
  mounted() {
    // console.log(this.commentParent);
  },
  filters: {
    offsetdateFormat,
  },
  methods: {
    replaybyConnentItem(parent) {
      this.$emit("sendComment", parent);
    },
  },
};
</script>

<style lang="less" scoped>
.commentItem {
  border: 1px solid #ccc;
  padding: 5px;
  .top {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    line-height: 30px;
    .left {
      .nickName {
        padding-right: 10px;
      }
      .time {
        color: #999;
        font-size: 13px;
      }
    }
    .replay {
      color: #999;
    }
  }
  .bottom {
    line-height: 40px;
    font-size: 14px;
  }
}
</style>